<template>
	<view class="p-20-0">
		<view class="bg-white p-0-20">
			<view @click="chooseItem(item)" class="d-b-c border-b p-20-0" v-for="(item,index) in list" :key="index">
				<view class="d-s-s f-w d-c flex-1 ">
					<text class="f28 mb16">{{ getLocalizedValue(item,"grade_name") }}</text>
					<text class="gray9 f22">{{ $t("agent.index.text20") }}：{{item.number}}</text>
				</view>
				<view class="icon iconfont icon-jiantou ml80 f-s-0">
				</view>
			</view>
		</view>

		<view v-if="isPopup" class="qrcode-wrap" @click="isPopup = false">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrCodeUrl" :options="{ width:'500rpx',height:'500rpx' }">
			</uqrcode>
		</view>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue'
	export default {
		components: {
			Popup
		},
		data() {
			return {
				list: [],
				isPopup: false,
				qrCodeUrl: "123"
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {

			chooseItem(item) {
				if (item.number <= 0) {
					uni.showToast({
						title: this.$t("agent.index.text21"),
						icon: "none"
					})
					return
				}
				this.qrCodeUrl =
					`${window.origin}/h5/#/pages/agent/user-upgrade-detail/user-upgrade-detail?code=${item.code}`
				this.isPopup = true
				console.log(this.qrCodeUrl)
			},

			async getList() {
				this._post("user.agent/get_grade_update_number", {}, res => {
					this.list = res.data.list
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.qrcode-wrap {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>